<template>
    <div class='photo-info'>
        <h3 class="title">{{infoList.title}}</h3>
        <p>
            <span>发表时间：{{infoList.add_time}}</span>
            <span>点击：{{infoList.click}}次</span>
        </p>
        <hr>

         <img class="preview-img" v-for="(item, index) in list" :key='item.src' :src="item.src" height="100" @click="$preview.open(index, list)">

        <div class="content">
            {{infoList.content}}
        </div>
        <comment :id='id'></comment>
    </div>
</template>


<script>
import comment from '../subcomponent/comment.vue'

export default {
    data(){
        return {
            id:this.$route.params.id,
            infoList:{},
            list:[]
        }
    },
    created(){
        this.getPhotoInfo()
        // console.log(this.id)
        this.getthumimages()
    },
    methods:{
        getPhotoInfo(){  //获取图片详情
            this.$http.get('api/getimageInfo/'+this.id).then(res=>{
                // console.log(res)
                if(res.body.status===0){
                    this.infoList=res.body.message[0]
                    console.log( this.infoList)
                }
            })
        },
        getthumimages(){ //获取缩略图
        this.$http.get('api/getthumimages/'+this.id).then(res=>{
            // console.log(res)
            if(res.body.status==0){this.list=res.body.message}
        })
    },
    },
    components:{
        comment
    }
    
}
</script>


<style lang="scss" scoped>
    .photo-info{
        padding: 0 10px;
        .title{
        color:#25b055;
        text-align: center;
        }
        p{
            display: flex;
            justify-content: space-between;
            font-size: 15px;

            span{

            }
        }
        .content{
            margin-bottom: 50px;
        }
    }
    
</style>